<template>
    <div>
        <el-dialog 
        :title="addInfo.isAdd ? '添加轮播图' : '编辑轮播图'" 
        :visible.sync="addInfo.isShow" 
        center
        :before-close="cancel">
            <el-form :model="bannerFrom" :rules="rules" ref="bannerFrom">
                <el-form-item label="标题" prop="title" :label-width="formLabelWidth">
                    <el-input v-model="bannerFrom.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图片" :label-width="formLabelWidth"
                
                >
                    <el-upload 
                    action="#" 
                    :auto-upload="false"
                    list-type="picture-card"
                    :on-preview="onPreview"
                    :on-change="onChange"
                    :on-exceed="onExceed"
                    :file-list="fileList"
                    :limit="1"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <el-form-item label="状态" prop="status" :label-width="formLabelWidth">
                    <el-switch
                        v-model="bannerFrom.status"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        :active-value="1"
                        :inactive-value="2"
                        >
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirn">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { banneradd, banneredit, bannerinfo } from '@/request/api';
import { mapActions } from 'vuex';
export default {
    props: ['addInfo'],
    data() {
        return {
            bannerFrom: {
                title: '',//轮播图名称
                img: '',//图片(文件)
                status: 1,//状态1正常2禁用
            },
            formLabelWidth: '120px',
            rules: {
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                    { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
                ]
            },
            dialogImageUrl: '',
            dialogVisible: false,
            fileList:[]
        }
    },
    methods: {
        ...mapActions({
            getBannerListAction:'banner/getBannerListAction'
        }),
        reset(){
            this.bannerFrom = {
                title: '',//轮播图名称
                img: '',//图片(文件)
                status: 1,//状态1正常2禁用
            };
            this.$refs.bannerFrom.resetFields();
            this.fileList = []
        },
        cancel(){
            this.$emit('cancel',false);
            this.reset()
        },
        lookup(id){
            bannerinfo({id}).then(res=>{
                // console.log(res,'llll');
                if (res.code == 200) {
                    this.bannerFrom = res.list;
                    this.bannerFrom.id = id;
                    this.fileList = this.bannerFrom.img ? [{url:this.bannerFrom.img}] : []
                }
            })
        },
        onPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        onChange(file,fileList){
            this.bannerFrom.img = file.raw
        },
        onExceed(files, fileList){
           this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个 文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        confirn(){
            this.$refs.bannerFrom.validate(val=>{
                if (val) {
                    if (this.addInfo.isAdd) {
                        banneradd(this.bannerFrom).then(res=>{
                            console.log(res,'/////');
                            if (res.code == 200) {
                                this.$message.success(res.msg);
                                this.getBannerListAction();
                                this.cancel()
                            }else{
                                this.$message.error(res.msg)
                            }
                        })
                    }else{
                        banneredit(this.bannerFrom).then(res=>{
                            if (res.code == 200) {
                                this.$message.success(res.msg);
                                this.getBannerListAction();
                                this.cancel()
                            }else{
                                this.$message.error(res.msg)
                            }
                        })
                    }
                }
            })
        }
    }
}
</script>

<style scoped>

</style>